<!--登陆 欢迎的 -->
<template>
  <div class="header-top">
    <div class="w1200">
      <ul class="titles">
        <li
          class="titles_li"
          v-show="!SignIn"
          v-for="item in navLeft"
          :key="item.id"
          @click="jump($event,item.id)"
        >{{item.name}}</li>

        <p v-show="SignIn" style="color:#ff4e00;">
          您好，
          <span>{{ this.$store.state.UserName }}</span> 欢迎光临孚地卖场！
        </p>
        <li v-show="SignIn" @click="returnAccount" class="titles_li">退出当前账户</li>
        <li @click="jumpHome" v-if="homeshow" class="titles_li">回到首页</li>
      </ul>

      <ul class="titles">
        <template v-for="item in navRight">
          <li :key="item.id" @click="jumps($event, item.id)" class="titles_li">
            {{item.name}}
            <span class="el-icon-arrow-down icon" v-show="item.show"></span>
          </li>
        </template>
        <template>
          <transition name="el-zoom-in-top">
            <div class="drop-down1" v-show="dropDown1" @mouseleave="leave1">
              <ul>
                <li v-for="(title,index) in customerService" :key="index">
                  <b>{{ title.title }}</b>
                  <ol>
                    <li
                      v-for="item in title.contents"
                      :key="item.id"
                      @click="jumpDetails1(item.id)"
                    >{{ item.content }}</li>
                  </ol>
                </li>
              </ul>
            </div>
          </transition>
          <transition name="el-zoom-in-top">
            <div class="drop-down2" v-show="dropDown2" @mouseleave="leave2">
              <ul>
                <li v-for="(title,index) in URLnavigation" :key="index">
                  <b>{{ title.title }}</b>
                  <ol>
                    <li
                      v-for="item in title.contents"
                      :key="item.id"
                      @click="jumpDetails2(item.id,item)"
                    >{{ item.name }}</li>
                  </ol>
                </li>
              </ul>
            </div>
          </transition>
        </template>
      </ul>
      <!-- {{contents}} -->

    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: "NavLogin",
  data() {
    return {
      SignIn: false, // 是否登录 默认值为flase
      navLeft: [
        {
          name: "您好，欢迎光临孚地卖场！",
          id: 0
        },
        {
          name: "登录",
          id: 1
        },
        {
          name: "免费注册",
          id: 2
        }
      ],
      navRight: [
        {
          name: "我的订单",
          id: 0
        },
        {
          name: "我的孚地",
          id: 1
        },
        {
          name: "收藏夹",
          id: 2
        },
        {
          name: "客户服务",
          id: 3,
          show: 1
        },
        {
          name: "网址导航",
          id: 4,
          show: 1
        }
      ],

      customerService: [
        {
          title: "客户服务",
          contents: [
            {
              content: "客户",
              id: 0
            },
            {
              content: "商户",
              id: 1
            }
          ]
        }
      ],
      URLnavigation: [
        {
          title: "走进孚地",
          contents: [
            {
              name: "关于孚地卖场",
              id: 1
            },
            {
              name: "服务范围",
              id: 2
            },
            {
              name: "产品介绍",
              id: 3
            },
            {
              name: "合作客户",
              id: 4
            }
          ]
        },
        {
          title: "资讯中心",
          contents: []
        },
        {
          title: "求购中心",
          contents: [
            {
              name: "发布需求",
              id: 8
            }
          ]
        },
        {
          title: "帮助中心",
          contents: [
            {
              name: "交易购物",
              id: 9
            },
            {
              name: "物流配送",
              id: 10
            },
            {
              name: "售后服务",
              id: 11
            },
            {
              name: "协议条款",
              id: 12
            }
          ]
        }
      ],
      dropDown1: false, // 客服服务下拉显示与隐藏
      dropDown2: false  // 网站导航下拉显示与隐藏
    }
  },

  methods: {
    leave1() {
      this.dropDown1 = false
    },
    leave2() {
      this.dropDown2 = false
    },
    jumpHome() {
      this.$router.push("/")
    },

    // 客户服务子栏目点击事件
    jumpDetails1(event) {
      console.log(event)
      if (event == 0) {
        this.$router.push("/CustomerService")
      }
      if (event == 1) {
        this.$router.push("/MerchantServices")
      }
    },

    // 网站导航的详情的点击事件
    jumpDetails2(id, item) {
      console.log(id, item)
      if (!item.alias) {
        switch (id) {
          case 1:
            this.$router.push({
              name: "GotoFudi",
              params: {
                myPosition: 1,
                id: 1
              }
            })
            break

          case 2:
            this.$router.push({
              name: "GotoFudi",
              params: {
                myPosition: 2,
                id: 2
              }
            })
            break

          case 3:
            this.$router.push({
              name: "GotoFudi",
              params: {
                myPosition: 3,
                id: 3
              }
            })
            break

          case 4:
            this.$router.push({
              name: "GotoFudi",
              params: {
                myPosition: 4,
                id: 4
              }
            })
            break

          case 5:
            this.$router.push({
              name: "webBulletin",
              params: {
                id: item.id
              }
            })
            console.log('66666666666666666666666')
            this.$store.commit('newleftgoto',item)
            this.$store.commit('leftIndex',item.id)   // 点击的id存在 leftIndex
            break

          case 6:
            this.$router.push({
              name: "webBulletin",
              params: {
                id: item.id
              }
            })
            this.$store.commit('newleftgoto',item)
            this.$store.commit('leftIndex',item.id)   // 点击的id存在 leftIndex
            break

          case 7:
            this.$router.push({
              name: "webBulletin",
              params: {
                id: item.id
              }
            })
            this.$store.commit('newleftgoto',item)
            this.$store.commit('leftIndex',item.id)   // 点击的id存在 leftIndex
            break

          case 8:
            this.$router.push({
              name: "purchaseCenter",
              params: {
                sonshow: 0
              }
            })
            break

          case 9:
            this.$router.push({
              name: "content1",
              params:{
                id:1
              }
            })
            break

          case 10:
            this.$router.push({
              name: "content6",
              params:{
                id:6
              }
            })
            break

          case 11:
            this.$router.push({
              name: "content10",
              params:{
                id:10
              }
            })
            break

          case 12:
            this.$router.push({
              name: "content14",
              params:{
                id:14
              }
            })
            break
        }
      } else {

        this.$router.push({
          name: 'webBulletin',
          params: {
            id,
          }
        })
        this.$store.commit('newleftgoto',item)
      }

    },

    // 退出当前账户
    returnAccount() {
      if (localStorage.getItem("token")) {
        this.$store.commit("del_token")
        this.$store.commit("del_UserInfor")
        this.$store.commit("del_UserName")

        this.$notify({
          title: "成功退出账户",
          type: "success"
        })
        this.SignIn = false
      } else {
        this.$notify({
          title: "您尚未登录任何账户",
          // message: '请重新登录您的账号...',
          type: "warning"
        })
      }
    },

    // 右侧的导航点击
    jumps(ev, index) {
      
      // index == 0 点击了我的订单这一选项
      if (index == 0) {
        
        this.$router.push({
          name: "FullOrder",
        })

        this.$store.commit("leftIndex", 1)

      }

      if (index == 1) {
        
        this.$router.push({
          name: "MyCenter",
        })

        this.$store.commit("leftIndex", 0)

      }

      if (index == 2) {
        
        this.$router.push({
          name: "MyCollection",
        })

        this.$store.commit("leftIndex", 4)

      }

      if (index == 3) {
        this.dropDown1 = !this.dropDown1
      }

      if (index == 4) {
        this.dropDown2 = !this.dropDown2
      }

    },

    // 左侧的导航点击
    jump(ele, index) {
      switch (index) {
        case 0:
          console.log(index)
          break
        case 1:
          // console.log()
          if (localStorage.getItem("token")) {
            this.$notify({
              title: "您已经登录 请勿重复登录...",
              // message: '请重新登录您的账号...',
              type: "success"
            })
          } else {
            this.$router.push("/login") //跳转到登陆页面
          }

          break
        case 2:
          this.$router.push("/register") //跳转到注册页面
          break

        default:
          console.log("超出范围")
      }
    },

    // token 验证
    tokenVerification() {
      const jwt = localStorage.getItem("token")
      if (jwt) {
        this.$http({
          method: "post",
          url: "index/login/auth",
          data: {
            jwt
          }
        })
          .then(res => {
            console.log(res)
            let data = res.data

            if (data.State.Code == 600) {
              this.$store.commit("del_token")
              this.$router.push("/login")
              this.$notify.info({
                title: "登录已过期",
                message: "请重新登录......"
              })
            } else {
              // 个人用户企业用户区分 userStatus 为true 为去也 flase为个人
              // 用户名字的获取
              this.$store.commit("userStatus", data.data.userStatus)
              let user_id = this.$store.state.UserInfor.user_id
              let status = "user"
              try {
                this.$http({
                  method: "post",
                  url: "index/web/doSelfInfos",
                  data: {
                    user_id,
                    status
                  }
                })
                  .then(res => {
                    if (res.data.State.Code == 200) {
                      this.$store.commit("UserName", res.data.data.name)
                      this.$store.commit("doSelfInfos", res.data.data)
                    }
                  })
                  .catch(err => {
                    console.log(err)
                  })
              } catch (error) {
                console.log("token 验证的获取用户名字的接口出现了问题")
              }
            }
            // console.log(res)
          })
          .catch(err => {
            console.log(err)
          })
        this.SignIn = true
      } else {
        this.SignIn = false
      }
    }
  },

  computed: {
    ...mapState({
      contents: state => state.getInformationCenterData
    }),
    homeshow() {
      return this.$store.state.homeShow
    }
  },

  mounted() {
    this.URLnavigation[1].contents = Object.assign({}, this.contents)
    this.tokenVerification()   // token接口有有问题 暂时先注释掉 后期再放开
    
  }
}
</script>

<style lang="scss" scoped>

.header-top {
  width: 100%;
  height: 39px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e6e6e6;

  .w1200 {
    width: 1200px;
    height: 39px;
    // border-bottom: #e6e6e6 solid 1px;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    .drop-down1 {
      position: absolute;
      top: 40px;
      right: 0;
      z-index: 100;
      width: 174px;
      border-top: 4px solid #1e99ff;
      background-color: rgba(255, 255, 255, 0.98);
      box-shadow: 1px 1px 10px rgba($color: #000000, $alpha: 0.1);
      ul {
        li {
          b {
            display: block;
            padding-left: 20px;
            padding-top: 10px;
          }
          ol {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            // width: 306px;
            margin: auto;
            li {
              padding: 0 10px;
              font-size: 12px;
              color: #595959;
              line-height: 12px;
              margin-right: 10px;
              border-left: 2px solid #dedede;
              margin-top: 8px;
              margin-bottom: 8px;
              cursor: pointer;
              &:first-child {
                margin-left: 20px;
              }
              &:hover {
                color: #ff4e00;
              }
            }
          }
        }
      }
    }
    .drop-down2 {
      position: absolute;
      top: 40px;
      right: 0;
      z-index: 100;
      width: 340px;
      border-top: 4px solid #1e99ff;
      background-color: rgba(255, 255, 255, 0.98);
      box-shadow: 1px 1px 10px rgba($color: #000000, $alpha: 0.1);
      ul {
        li {
          b {
            display: block;
            padding-left: 20px;
            padding-top: 10px;
          }
          ol {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            width: 306px;
            margin: auto;
            li {
              padding: 0 10px;
              font-size: 12px;
              color: #595959;
              line-height: 12px;
              margin-right: 10px;
              border-left: 2px solid #dedede;
              margin-top: 8px;
              margin-bottom: 8px;
              cursor: pointer;
              &:hover {
                color: #ff4e00;
              }
            }
          }
        }
      }
    }
    .titles {
      display: flex;
      flex-direction: row;
      align-items: center;
      color: #636363;
      font-size: 12px;
      .titles_li {
        font-size: 12px;
        letter-spacing: 0.6px;
        margin-left: 20px;
        cursor: pointer;
        &:hover {
          color: #ff4e00;
        }
        span {
          font-size: 12px;
        }
        &:first-child {
          color: #ff4e00;
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
    // 后期删掉
    .houqishandiao {
      display: flex;
      line-height: 39px;
      font-size: 12px;
      li {
        padding: 0 10px;
        cursor: pointer;
        &:hover {
          color: #ff4e00;
        }
      }
    }
  }
}
</style>
